import { BasicForm, useForm } from "@/components/Form";
import { useTranslation } from "react-i18next";
import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from "@/components/Table/index";
import { useEffect, useState } from "react";
import Toolbar from "@/components/ViewComponents/Toolbar";
import { message } from "antd";
import { activitiesDelete, activitiesList } from "@/api/SecondmentDictionary";
import CreateAndUpdata from "./components/createAndUpdata";
import { useDrawer } from "@/components/Drawer";
import { TimeDate } from "@/utils/util";
import { IconEnum } from "@/enums/appEnum";
let pageNo: Number = 1;
let pageSize: Number = 10;
export default function scientific_activities() {
	const { t } = useTranslation();
	let btnList = [
		{
			key: "add"
		}
	];
	const columns: BasicColumn[] = [
		{
			title: t("felix_ui.sq_numb"),
			dataIndex: "index",
			render: (text, record, index) => index * 1 + 1 // 设置序号
		},
		{
			title: t("kevin_ui.activityNumber"),
			dataIndex: "actvtId"
		},
		{
			title: t("kevin_ui.activityName"),
			dataIndex: "actvtName"
		},
		{
			title: t("kevin_ui.subject"),
			dataIndex: "actvtSubject"
		},
		{
			title: t("kevin_ui.activityForm"),
			dataIndex: "actvtForm"
		},
		{
			title: t("kevin_ui.eventAddress"),
			dataIndex: "addrInfo"
		},
		{
			title: t("viewComponents.patientInformation.validFrom"),
			dataIndex: "actvtStartDate",
			render: (date: any) => TimeDate(date)
		},
		{
			title: t("viewComponents.patientInformation.validTo"),
			dataIndex: "actvtEndDate",
			render: (date: any) => TimeDate(date)
		},
		{
			title: t("kevin_ui.organizer"),
			dataIndex: "ownerGroupId"
		},
		{
			title: t("kevin_ui.coOrganizer"),
			dataIndex: "coOrgGroupId"
		},
		{
			title: t("kevin_ui.operate"),
			fixed: "right",
			render: (_, record) => {
				return (
					<TableAction
						actions={[
							{
								icon: IconEnum.EDIT,
								label: t("felix_ui.edit"),
								onClick: upData(record)
							},
							{
								icon: IconEnum.DELETE,
								label: t("felix_ui.delete"),
								popConfirm: {
									title: t("common.deleteMessage"),
									placement: "left",
									confirm: deleteFn.bind(null, record)
								}
							}
						]}
					></TableAction>
				);
			}
		}
	];
	const [tableList, setTableList] = useState([]);
	const [registerTable, { setPagination, setProps }] = useTable({
		dataSource: tableList,
		columns,
		useSearchForm: false,
		showTableSetting: false,
		bordered: true
	});

	const formSchemaTop: FormSchema[] = [
		{
			label: t("kevin_ui.activityName"),
			field: "actvtName", //活动名称
			component: "Input"
		},
		{
			label: t("kevin_ui.subject"),
			field: "actvtSubject", //活动主题
			component: "Input"
		},
		{
			label: t("kevin_ui.activityForm"),
			field: "actvtForm", //活动形式:
			component: "Select",
			componentProps: {
				options: [
					{ label: t("secondmentDictionary.onLine"), value: "1" },
					{ label: t("secondmentDictionary.offline"), value: "2" }
				]
			}
		},
		{
			label: t("kevin_ui.organizer"),
			field: "ownerGroupId", //主办单位
			component: "Input"
		},
		{
			label: t("kevin_ui.coOrganizer"),
			field: "coOrgGroupId", //协办单位
			component: "Input"
		}
	];
	const [formTop, { getFieldsValue: formTopValue }] = useForm({
		schemas: formSchemaTop,
		labelWidth: 130,
		autoSubmitOnEnter: true,
		showActionButtonGroup: true,
		submitFunc: () => {
			selectFn();
		},
		baseColProps: {
			span: 8
		},
		actionColOptions: { span: 24 }
	});
	const [registerDrawer, { openDrawer }] = useDrawer();
	const selectFn = async () => {
		const res = await formTopValue();
		getActivities(res);
	};
	const getActivities = async (value?: any) => {
		let parameter = { pageSize, pageNo };

		if (value) {
			console.log(value);
			parameter = {
				...parameter,
				...value
			};
		}
		const res = await activitiesList(parameter);
		setPagination({
			total: res.total,
			onChange: (pageN: Number, pageS: Number) => {
				pageNo = pageN;
				pageSize = pageS;
				getActivities();
			}
		});
		setProps({
			dataSource: res.list,
			pagination: {
				total: res.total
			}
		});

		setTableList(res.list);
	};
	const handlerToolbarAction = (key: string) => {
		switch (key) {
			case "add":
				openDrawer(true, {
					getActivities
				});
				break;
		}
	};
	const upData = (record: any) => () => {
		openDrawer(true, {
			record,
			getActivities
		});
	};
	const deleteFn = async (record: any) => {
		const res = await activitiesDelete(record.actvtId);
		if (res) {
			message.success(t("kevin_ui.daleteSucceessfully"));
			getActivities();
		}
	};
	useEffect(() => {
		getActivities();
	}, []);
	return (
		<div className="page">
			<div className="page-content">
				<div className="block">
					<h3 className="block-label">Ⅰ、{t("kevin_ui.filter")}</h3>
					<div className="headerSelectForm">
						<BasicForm register={formTop}></BasicForm>
					</div>
				</div>
				<div className="block mt-2">
					<h3 className="block-label">Ⅱ、{t("kevin_ui.scientificActivities")}</h3>
					<div>
						<BasicTable register={registerTable}></BasicTable>
					</div>
				</div>
			</div>
			<CreateAndUpdata register={registerDrawer}></CreateAndUpdata>
			<Toolbar action={handlerToolbarAction} btnList={btnList} />
		</div>
	);
}
